<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>华为商城</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			
			.top {
				border: 1px solid #EDEDED;
				background-color: #FAFAFA;
				overflow: hidden;
				font-size: 13px;
				line-height: 30px;
			}
			
			.top a {
				text-decoration: none;
				color: #8C8C8C;
			}
			
			ul li {
				list-style-type: none;
				color: #C8C8C8;
			}
			
			ul span {
				margin-left: 10px;
				margin-right: 10px;
			}
			
			.ul_left {
				margin-left: 75px;
			}
			
			.ul_left li {
				float: left;
			}
			
			.ul_right {
				margin-right: 75px;
			}
			
			.ul_right li {
				float: right;
			}
			
			.top .black_font {
				color: black;
			}
			
			.top a:hover {
				color: #CA151E;
			}
			
			.display_left {
				border: 1px solid;
				width: 89px;
				position: relative;
				top: -32px;
				left: 214px;
				font-size: 13px;
				text-indent: 13px;
				line-height: 27px;
				border: 1px solid #EDEDED;
				z-index: 10;
				display: none;
				background-color: white;
			}
			
			.display_left a {
				text-decoration: none;
				color: #8C8C8C;
			}
			
			.display_left a:hover {
				color: #CA151E;
				background-color: white;
			}
			
			.display_right {
				border: 1px solid;
				width: 89px;
				position: relative;
				top: -32px;
				left: 1212px;
				font-size: 13px;
				text-indent: 13px;
				line-height: 27px;
				border: 1px solid #EDEDED;
				z-index: 10;
				display: none;
				background-color: white;
			}
			
			.display_right a {
				text-decoration: none;
				color: #8C8C8C;
			}
			
			.display_right a:hover {
				color: #CA151E;
			}
			.bottom{
				border: 1px solid;
			}
			.hwtb{
				border: 1px solid;
				margin-left: 65px;
				margin-top: 15px;
			}
			.search{
				width: 365px;
				border: 3px solid #CA141D;
				line-height: 28px;
				margin-left: 100px;
				position: relative;
				bottom: 25px;
			}
			.bt_search{
				width: 64px;
				line-height: 28px;
				margin-left: -5px;
				border: 2px solid #CA141D;
				background-color: #CA141D;
				position: relative;
				bottom: 25px;
				
			}
		</style>
		<script type="text/javascript">
			function showleft() {
				document.getElementById("display_left").style.display = "block";
			}

			function disleft(t) {
				t.style.display = "none";
			}

			function showright() {
				document.getElementById("display_right").style.display = "block";
			}

			function disright(t) {
				t.style.display = "none";
			}
		</script>
	</head>

	<body>
		<header>
			<div class="top">
				<ul class="ul_left">
					<li>
						<a href="#">华为官网</a><span>|</span></li>
					<li>
						<a href="#">荣耀官网</a><span>|</span></li>
					<li>
						<a href="#" id="rjyy" onmouseover="showleft()">软件应用</a><span>∨ |</span></li>
					<li>
						<a href="#">花粉俱乐部</a><span>|</span></li>
					<li>
						<a href="#">Select Region</a>
					</li>
				</ul>
				<ul class="ul_right">
					<li>
						<a href="#" onmouseover="showright()">网站导航 </a> ∨
					</li>
					<li>
						<a href="#">手机版</a><span>|</span></li>
					<li>
						<a href="#">V码(优购码)</a><span>|</span></li>
					<li>
						<a href="#">我的订单</a><span>|</span></li>
					<li>
						<a href="#" class="black_font">注册</a><span>|</span></li>
					<li>
						<a href="#" class="black_font">登录<span></span></a>
					</li>
				</ul>
			</div>
			<div class="display_left" id="display_left" onmouseleave="disleft(this)">
				<ul>
					<li>
						<a href="#">软件应用</a>&nbsp;&nbsp;∧</li>
					<li>
						<li>
							<a href="#">EMUI</a>
						</li>
						<li>
							<a href="#">应用市场</a>
						</li>
						<li>
							<a href="#">云服务</a>
						</li>
						<li>
							<a href="#">开发者联盟</a>
						</li>
				</ul>
			</div>
			<div class="display_right" id="display_right" onmouseleave="disright(this)">
				<ul>
					<li>
						<a href="#">网站导航</a>&nbsp;&nbsp;∧</li>
					<li>
						<li>
							<a href="#">帮助中心</a>
						</li>
						<li>
							<a href="#">PC软件</a>
						</li>
						<li>
							<a href="#">数字音乐</a>
						</li>
						<li>
							<a href="#">爱旅</a>
						</li>
						<li>
							<a href="#">华为网盘</a>
						</li>
				</ul>
			</div>
			<div class="bottom">
				<img src="img/imgs_huawei/index/2016-08-14_191054.png" class="hwtb"/>
				<input type="text" name="search" id="search" placeholder="荣耀8" class="search"/>
				<input type="button" name="search_bt" id="search_bt" value="搜索" class="bt_search"/>
			
			</div>

		</header>
		<section></section>
		<footer></footer>
	</body>

</html>